<!-- 下拉加载更多 -->
<template>
  <infinite-loading :target="target" :distance="distance" :top="top" :identifier="identifier" :firstload="firstLoad" @infinite="load">
    <template #spinner>
      <div class="infinite-loading-tip line">
        数据加载中
        <svg
          id="L5"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          x="0px"
          y="0px"
          viewBox="0 0 100 100"
          enable-background="new 0 0 0 0"
          xml:space="preserve"
        >
          <circle fill="rgba(25, 25, 48, 0.2)" stroke="none" cx="6" cy="50" r="6">
            <animateTransform
              attributeName="transform"
              dur="1s"
              type="translate"
              values="0 15 ; 0 -15; 0 15"
              repeatCount="indefinite"
              begin="0.1"
            />
          </circle>
          <circle fill="rgba(25, 25, 48, 0.2)" stroke="none" cx="30" cy="50" r="6">
            <animateTransform
              attributeName="transform"
              dur="1s"
              type="translate"
              values="0 10 ; 0 -10; 0 10"
              repeatCount="indefinite"
              begin="0.2"
            />
          </circle>
          <circle fill="rgba(25, 25, 48, 0.2)" stroke="none" cx="54" cy="50" r="6">
            <animateTransform
              attributeName="transform"
              dur="1s"
              type="translate"
              values="0 5 ; 0 -5; 0 5"
              repeatCount="indefinite"
              begin="0.3"
            />
          </circle>
        </svg>
      </div>
    </template>
    <template #complete>
      <slot name="complete" :empty="empty">
        <template v-if="empty">
          <slot name="empty">
            <default-graph :style="{ marginTop: imgMarginTop }" :title="emptyText">
              <img src="@/assets/img/no-course.svg" />
            </default-graph>
            <!-- 下边距 -->
            <div :style="{ height: imgMarginTop }"></div>
          </slot>
        </template>
        <div v-else class="infinite-loading-tip"><span v-if="showBottomText">已加载全部数据</span></div>
      </slot>
    </template>

    <template #error="{ retry }">
      <slot name="complete" :retry="retry">
        <default-graph v-if="empty" :style="{ marginTop: imgMarginTop }" show-button button-text="点击刷新" @on-click-button="retry">
          <img src="@/assets/img/emptyState.svg" alt="加载失败" />
        </default-graph>
        <div v-else>
          <div class="infinite-loading-tip mt-56">
            <p>更多数据加载失败</p>
            <a-button @click="retry">点击刷新</a-button>
          </div>
        </div>
      </slot>
    </template>
  </infinite-loading>
</template>

<script setup lang="ts">
  import InfiniteLoading from 'v3-infinite-loading'

  export interface InfiniteLoadingProps {
    // 此属性用于指定可滚动元素，它可以是任何有效的css选择器，如果未设置，则默认为窗口
    target?: string | HTMLElement
    // 如果滚动距离小于此值，将触发无限事件。
    distance?: number
    // 此属性用于将加载方向设置为顶部。
    top?: boolean
    // 如果这个属性改变了，组件将被重置
    identifier?: any
    // 此属性用于指定是否希望组件处理首次加载。
    firstLoad?: boolean
    // 是否空数据
    empty?: boolean
    // 空数据提示
    emptyText?: string
    // 占位图片顶部距离
    imgMarginTop?: string
    // 是否展示底部已加载完成文字
    showBottomText?: boolean
  }

  withDefaults(defineProps<InfiniteLoadingProps>(), {
    target: 'window',
    distance: 0,
    top: false,
    identifier: '',
    firstLoad: true,
    empty: false,
    emptyText: '暂无数据',
    imgMarginTop: '0',
    showBottomText: true
  })
  const emits = defineEmits(['infinite'])

  const load = ($state: any) => {
    emits('infinite', $state)
  }
</script>

<style lang="less" scoped>
  .infinite-loading-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 64px;
    padding-bottom: 120px;
    width: 100%;
    font-size: 14px;
    color: @text04;
    flex-direction: column;
    gap: 20px 0;

    &.line {
      flex-direction: unset;
    }
  }

  svg {
    display: block;
    margin: 0;
    margin-left: 6px;
    width: 50px;
    height: 50px;
  }

  .error-text {
    text-align: center;
    color: @text04;
    .font14();
  }
</style>
